<template>
  <div>
    <el-form :model="ruleForm" :rules="rules"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="推荐类别" prop="reconType">
        <el-select v-model="ruleForm.reconType">
          <el-option label="网络正能量内容创作者（含账号）" value="选项1"></el-option>
          <el-option label="网络正能量传播者（含账号和平台）" value="选项2"></el-option>
          <el-option label="网络空间的正能量公众人物" value="选项3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="榜样名称" prop="modelName">
        <el-input  v-model="ruleForm.modelName"></el-input>
      </el-form-item>
      <el-form-item label="主要网络事迹" prop="desc">
        <el-input type="textarea" v-model="ruleForm.desc"  placeholder="请输入主要网络事迹(不超过50字)"></el-input>
      </el-form-item>
      <el-form-item label="事迹相关链接" prop="url">
        <el-input v-model="ruleForm.url"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-checkbox v-model="ruleForm.pstatus">保证榜样事迹内容属实，不存在虚构照搬</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="waring" @click="$router.go(-1)">上一步</el-button>
        <el-button type="waring" @click="submitForm('ruleForm')">下一步</el-button><!--还没写跳转的下一步的URL路径-->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'ModelDeed',
  data () {
    return {
      ruleForm: {
        reconType: '',
        modelName: '',
        desc: '',
        url: '',
        pstatus: ''
      },
      rules: {
        reconType: [
          {required: true, message: '请选择推荐类别', trigger: 'change'}
        ],
        modelName: [
          {required: true, message: '请输入榜样名称', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在3到5个字符', trigger: 'blur'}
        ],
        desc: [
          {required: true, message: '请输入主要网络事迹', trigger: 'blur'},
          {min: 3, max: 50, message: '长度在3到50个字符', trigger: 'blur'}
        ],
        url: [
          { required: true, message: '请输入事迹相关链接', trigger: 'blur' },
          {type: 'url', message: '请输入正确的链接', trigger: 'blur'}
        ]
      }

    }
  },
  methods: {
    // 这里把提交和检验放在一个函数里进行判断
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
          // eslint-disable-next-line no-unused-expressions
          this.$axios.post('/api/modeldeed', {
            id: 1,
            modelName: this.ruleForm.modelName,
            desc: this.ruleForm.desc,
            url: this.ruleForm.url
          }
          ).then(res => {
            // code=?200
            if (res.data.code === 0) {
              console.info('yes')
            } else {
              console.info('no')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style scoped>

</style>
